<template>
	<view class="subject_page">
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<view v-else>
			<view class="subject" :style="{ backgroundImage: 'url(' + subjectData.ShareBgImg + ')', 'background-repeat': 'no-repeat', backgroundSize: '100% 100%' }">
				<view class="title">#{{ subjectData.Title }}</view>
				<view class="item">共有{{ subjectData.Communities.length }}人已加入挑战</view>
				<view class="item">活动时间：{{ singleTimeString(subjectData.StartDate) }}至{{ singleTimeString(subjectData.EndDate) }}</view>
				<view class="desc">
					<text v-if="subjectData.Description.length > 30">
						{{ subjectData.Description || '' }}
					</text>
					<text v-else>
						{{ subjectData.Description || '' }}
					</text>
				</view>
				<view class="f2 more" v-if="subjectData.Description.length > 30" @click="$refs['act_rule'].open()">
					<text class="c_sed">查看更多</text>
				</view>
			</view>
			<view class="tap">
				<view class="tabs wap">
					<view class="tabs_item" :class="{ tabs_item_curr: tabInd == 0 }" @click="setTab(0)">最新动态</view>
					<view class="tabs_item" :class="{ tabs_item_curr: tabInd == 1 }" @click="setTab(1)">人气排行</view>
				</view>
			</view>
			<view class="album">
				<!-- #ifdef MP-WEIXIN -->
				<x-scroll @onRefresh="onRefresh" :isNav="false" refresh="true" @scrolltolower="scrolltolower" offset="0" style="height: 100vh">
					<!-- #endif -->
					<block v-if="Array.isArray(list) && list.length > 0">
						<view class="list" id="listArea">
							<view class="item" v-for="(item, index) in list" :key="index">
								<view class="item_hd" @click="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)">
									<view class="left">
										<view class="cover">
											<image :src="item.HeadImgUrl" mode="aspectFill" />
										</view>

										<view class="item_name">
											{{ item.Name }}
											<view class="f3 year">
												{{ getYearStr(item.Birthday) }}后
												{{ item.City ? item.City : '' }}
											</view>
										</view>
									</view>
									<view class="f3 c3">{{ getTime(item.CreateTime) }}</view>
								</view>
								<view class="item_bd">
									<view class="f2 c2" v-if="item.PagePath != ''" @click="nav_to(`${item.PagePath}`)">
										<view class="">
											{{ item.Content }}
										</view>
									</view>
									<view class="f2 c2" v-else>
										{{ item.Content }}
									</view>

									<view class="mt20" @click.stop="'';" v-if="item.IsVideo === 0">
										<view class="one" @click.stop="lookimg(item.Images)" v-if="JSON.parse(item.Images).length == 1">
											<image
												class="simg"
												:src="JSON.parse(item.Images)[0] + '?x-oss-process=image/resize,m_fill,w_1500'"
												mode="widthFix"
												@click.stop="lookimg(item.Images, 0)"
											/>
										</view>
										<view class="two" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 2">
											<view class="two-one" @click.stop="lookimg(item.Images, 0)">
												<image class="simg" :src="JSON.parse(item.Images)[0] + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
											</view>
											<view class="two-two">
												<image
													class="simg"
													:src="JSON.parse(item.Images)[1] + '?x-oss-process=image/resize,m_fill,w_1500'"
													mode="aspectFill"
													@click.stop="lookimg(item.Images, 1)"
												/>
											</view>
										</view>
										<view class="three" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 3">
											<view class="three-one" @click.stop="lookimg(item.Images, 0)">
												<image class="simg" :src="JSON.parse(item.Images)[0] + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
											</view>
											<view class="three-two">
												<image
													class="simg"
													:src="JSON.parse(item.Images)[1] + '?x-oss-process=image/resize,m_fill,w_1500'"
													mode="aspectFill"
													@click.stop="lookimg(item.Images, 1)"
												/>
												<image
													class="simg"
													:src="JSON.parse(item.Images)[2] + '?x-oss-process=image/resize,m_fill,w_1500'"
													mode="aspectFill"
													@click.stop="lookimg(item.Images, 2)"
												/>
											</view>
										</view>
										<view class="four" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 4">
											<view class="four-one">
												<view class="four-one-one" @click.stop="lookimg(item.Images, 0)">
													<image class="simg" :src="JSON.parse(item.Images)[0] + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
												</view>
												<view class="four-one-two" @click.stop="lookimg(item.Images, 1)">
													<image class="simg" :src="JSON.parse(item.Images)[1] + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
												</view>
											</view>
											<view class="four-two">
												<view class="four-two-one" @click.stop="lookimg(item.Images, 2)">
													<image class="simg" :src="JSON.parse(item.Images)[2] + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
												</view>
												<view class="four-two-two" @click.stop="lookimg(item.Images, 3)">
													<image class="simg" :src="JSON.parse(item.Images)[3] + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
												</view>
											</view>
										</view>
										<view class="five" v-else>
											<view class="five-one" v-for="(imgs, index) in JSON.parse(item.Images)" :key="index">
												<image @click.stop="lookimg(item.Images, index)" :src="imgs + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
											</view>
										</view>
									</view>
									<view class="video_box" v-else @click.stop="">
										<video :src="JSON.parse(item.Images)[0]" :poster="JSON.parse(item.Images)[0] + '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'"></video>
									</view>
								</view>

								<view class="all-list">
									<view class="upvote">
										<view class="zan-time">
											{{ item.City ? item.City : '' }}
										</view>
										<view class="zan-review">
											<view class="zan" @click="zan(item)">
												<uni-icons type="heart" size="24" color="#9b9b9b" v-if="item.IsMyZAN == 0"></uni-icons>
												<uni-icons type="heart-filled" size="24" color="#ef4034" v-else></uni-icons>
												<text>{{ item.CommunityZAN.length > 0 ? item.CommunityZAN.length : '' }}</text>
											</view>
											<view class="zan" @click="open_gift(item)">
												<uni-icons type="gift" size="24" color="#9b9b9b" v-if="item.IsSendGift == 0"></uni-icons>
												<uni-icons type="gift-filled" size="24" color="#ef4034" v-else></uni-icons>
												<text>{{ item.TotalGiftNum > 0 ? item.TotalGiftNum : '' }}</text>
											</view>
											<view class="zan" @click="tocommit(item.ID, 0)">
												<uni-icons type="chatbubble" size="24" color="#9b9b9b"></uni-icons>
												<text>{{ item.CommunityComments.length > 0 ? item.CommunityComments.length : '' }}</text>
											</view>
											<view class="zan">
												<!-- #ifdef MP-WEIXIN -->
												<button hover-class="none" open-type="share" :data-id="item.ID">
													<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711001185805751.png"></image>
												</button>
												<!-- #endif -->
												<!-- #ifdef APP-PLUS -->
												<button hover-class="none" @click="app_share(item)">
													<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711001185805751.png"></image>
												</button>
												<!-- #endif -->
											</view>
										</view>
									</view>
									<view class="review-list" v-if="item.CommunityComments.length > 0">
										<view class="item_c" v-for="(review, c_index) in item.CommunityComments" :key="review.ID">
											<view class="content" @click="comment_edit(index, c_index)" v-if="review.ReplyID > 0">
												<text>{{ review.Name }} 回复 {{ review.Pre_Name }}:</text>
												{{ review.Content }}
											</view>
											<view class="content" @click="comment_edit(index, c_index)" v-else>
												<text>{{ review.Name }}:</text>
												{{ review.Content }}
											</view>
										</view>
									</view>
								</view>

								<view class="load" v-if="bottom_load">
									<u-loading-icon mode="circle" inactive-color="#fff" vertical></u-loading-icon>
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<u-empty
							mode="list"
							width="64"
							height="64"
							icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20230510114106.png"
							:show="true"
							iconSize="32"
							text="暂无动态"
						></u-empty>
					</block>
					<!-- #ifdef MP-WEIXIN -->
				</x-scroll>
				<!-- #endif -->
			</view>

			<view class="btm wap">
				<view class="btn1" @click="nav_to(`dynamic_add?a=${subjectData.ID}&t=${subjectData.Title}`)">
					<uni-icons type="camera" size="24" color="#fff"></uni-icons>
					<text>立即参与</text>
				</view>
			</view>
		</view>

		<uni-popup ref="act_rule" type="center">
			<view class="x-popup">
				<view class="popup-title">
					<view class="xiaoju-popup-close" @click="$refs['act_rule'].close()">关闭</view>
				</view>
				<view class="desc">
					<text>{{ subjectData.Description }}</text>
				</view>
				<view class="popup-btn" @click="$refs['act_rule'].close()">我知道了</view>
			</view>
		</uni-popup>

		<!-- 赠送礼物弹出层 -->
		<uni-popup ref="gift" type="center">
			<view class="x-popup">
				<view class="popup-title">
					赠送对方礼物
					<view class="xiaoju-popup-close" @click="$refs['gift'].close()">关闭</view>
				</view>
				<scroll-view class="popup-wrap" scroll-y="true" :show-crollbar="true" scroll-with-animation="true">
					<view class="x-list">
						<view v-for="(l, i) in gift" :key="i" @click="gift_active = i" class="list-cell" :class="{ 'list-active': i == gift_active }">
							<image class="list-icon" :src="l.Icon ? l.Icon : '/static/img/icon_bbt.png'" mode=""></image>
							<view v-if="i != gift_active" class="list-name">{{ l.Name }}</view>
							<view class="list-price">￥{{ l.Price }}</view>
							<view v-if="i == gift_active" class="list-btn">
								<view class="add" @click="gift_num_reduce(l)">-</view>
								<view class="count">
									{{ l.Num }}
								</view>
								<view class="add" @click="gift_num_plus(l)">+</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-btn" @click="giftEvent()">赠送</view>
			</view>
		</uni-popup>

		<!-- APP 分享 转发好友、朋友圈 -->
		<!-- #ifdef APP-PLUS -->
		<uni-popup ref="share" type="bottom">
			<view class="x-share">
				<view class="item" @click="shareWX()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image>
					<span>转发好友</span>
				</view>
				<view class="item" @click="sharePYQ()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"></image>
					<span>分享朋友圈</span>
				</view>
			</view>
		</uni-popup>
		<!-- #endif -->

		<inputBox :commit="commit" @submit="submit"></inputBox>
	</view>
</template>

<script>
import topStatus from '@/components/topStatus/topStatus.vue';
import inputBox from './components/input-box.vue';
export default {
	components: {
		topStatus,
		inputBox
	},
	tabTop: 0,
	data() {
		return {
			//    不知道为什么下面的方法会调用 this.ID  但是data里面没有ID 也没有赋值给ID的语句

			commit: false,
			textMore: false,
			_freshing: true,
			load: false,
			subjectData: {},
			actionID: 0,
			tabInd: 0,

			PageIndex: 1,
			PageSize: 10,

			list: [],
			dynamicLength: 0,
			cz_price: 100,
			zan_id: 0,
			cache_user: {},

			gift: [], //礼物数组
			gift_active: -1, //当前选中礼物
			sel_community: '',

			convInfo: {},

			bottom_load: false,

			review_id: 0,
			comment_id: 0
		};
	},
	computed: {
		getDesc(txt) {
			return (txt) => {
				if (txt) {
					return txt;
				} else {
					return '--';
				}
			};
		}
	},
	onShareAppMessage(e) {
		//发送给朋友
		// let trendsIndex = e.target.dataset.trendsIndex;
		if (e.target) {
			let trendsId = e.target.dataset.id;
			if (trendsId > 0) {
				let o = this.list.find((item) => item.ID == trendsId);
				let pid = uni.getStorageSync('user').UserID;

				this.shareTitle = '我在参加【' + this.subjectData.Title + '】,请给我点赞';
				this.sharePath = 'pages/dynamic/detail?pid=' + pid + '&id=' + trendsId;
				this.shareImg = o.IsVideo == 1 ? JSON.parse(o.Images)[0] + '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto' : JSON.parse(o.Images)[0];
				return {
					title: this.shareTitle,
					path: this.sharePath,
					imageUrl: this.shareImg
				};
			}
		} else {
			//发送给朋友
			let id = this.cache_user.UserID;

			let Name = this.cache_user.Name;

			return {
				title: `${Name}邀请您参加【${this.subjectData.Title}】`,
				path: `/pages/dynamic/subject?pid=${id}&id=${this.subjectData.ID}`,
				imageUrl: this.subjectData.Banner
			};
		}
	},
	methods: {
		app_share(item) {
			this.sel_community = item;
			this.$refs.share.open();
		},
		// 评论
		tocommit(ID, C_ID) {
			// console.log(id);
			this.commit = !this.commit;
			this.review_id = ID;
			this.comment_id = C_ID;
		},
		async submit(val) {
			if (val != '') {
				console.log(val);
				let res = await this.$api.post('/Community/UserComment', {
					CommunityID: this.review_id,
					Content: val,
					CompanyID: 6002,
					ReplyID: this.comment_id
				});
				console.log(JSON.parse(res.data));
				if (JSON.stringify(res.data) == 'true') {
					this.list.forEach((item, index) => {
						if (item.ID == this.review_id) {
							item.CommunityComments.push({
								UserID: uni.getStorageSync('user').UserID,
								HeadImgUrl: uni.getStorageSync('user').HeadImgUrl,
								Name: uni.getStorageSync('user').Name,
								Content: val,
								CreateTime: new Date(),
								ReplyID: this.comment_id
							});
							this.list.splice(index, 1, item);
						}
					});

					this.commit = !this.commit;
				}
			} else {
				this.$pv.msg('评论不能为空');
			}
		},
		singleTimeString(value) {
			var d = Date.parse(value);
			return this.$u.date(d, 'yyyy-mm-dd');
		},
		setTab(e) {
			this.tabInd = e;
			this.PageIndex = 1;
			this.list = [];

			if (e == 0) {
				this.getDynamicList(0);
			} else {
				this.getDynamicList(1);
			}
		},
		//礼数数减
		gift_num_reduce(l) {
			console.log('gift===' + l.Num);
			if (l.Num >= 1) {
				l.Num--;
			}
		},
		//礼物数加
		gift_num_plus(l) {
			if (l.Num >= 0) {
				l.Num++;
			}
		},
		// 赠送礼物的相关逻辑
		async giftEvent() {
			// 当前选中礼物
			const l = this.gift[this.gift_active];

			const gift_price = l.Price * l.Num;

			let res_gift = await this.$api.post('Friend/SendGift', {
				Price: gift_price,
				GiftID: l.ID,
				GiftName: l.Name,
				GiftQty: l.Num,
				ToUserID: this.sel_community.UserID,
				EventID: this.sel_community.ID,
				SendType: '球友圈赠送'
			});

			// id=123129&type=0&name=abc
			let pres = await this.$api.post('Payment/PayV2', {
				total_fee: 300,
				EventType: '申请微信',
				EventID: this.ID,
				body: '加微信',
				// #ifdef MP-WEIXIN
				PayChannel: 'weixin',
				// #endif
				// #ifdef APP
				PayChannel: 'app'
				// #endif
			});

			if (pres.data == 0) {
				//已余额支付成功

				this.$pv.msg('鲜花赠送成功');
				// 关闭添加微信弹出层
				this.$refs['weixin'].close();
				//
				this.$api.post('Friend/ApplyWechatNo', {
					ToUserID: this.ID
				});

				//发送消息
				this.$im
					.sendMessage(
						200,
						JSON.stringify({
							type: 'weixin'
						}),
						this.ID,
						10
					)
					.then((res) => {});

				const convInfo = {
					id: this.ID + '',
					type: 0,
					name: this.resData.Name
				};
				this.$im.clearNum(convInfo.id, convInfo.type);
				const preid = uni.$prefix + convInfo.id;
				this.nav_to(`/pages/im/chat?id=${preid}&type=${convInfo.type}&name=${convInfo.name}`);
				return;
			}

			let payObj = JSON.parse(pres.data);
			let _this = this;
			uni.requestPayment({
				provider: 'wxpay',
				// #ifdef APP
				orderInfo: payObj,
				// #endif
				// #ifdef MP-WEIXIN
				timeStamp: payObj.timeStamp,
				nonceStr: payObj.nonceStr,
				package: payObj.package,
				signType: payObj.signType,
				paySign: payObj.paySign,
				// #endif
				success(res) {
					// _this.$pv.msg('等待对方同意');
					_this.$refs['weixin'].close();
					_this.$api.post('Friend/ApplyWechatNo', {
						ToUserID: this.ID
					});

					//发送消息
					_this.$im
						.sendMessage(
							200,
							JSON.stringify({
								type: 'weixin'
							}),
							_this.ID,
							10
						)
						.then((res) => {});

					const convInfo = {
						id: _this.ID + '',
						type: 0,
						name: _this.resData.Name
					};
					_this.$im.clearNum(convInfo.id, convInfo.type);
					const preid = uni.$prefix + convInfo.id;
					_this.nav_to(`/pages/im/chat?id=${preid}&type=${convInfo.type}&name=${convInfo.name}`);
				},
				fail(err) {
					_this.$pv.msg('支付失败');
				}
			});
		},
		// 获取礼物列表
		async GetGift() {
			let res = await this.$api.post('Friend/GetGift');
			this.gift = res.data || [];
		},
		open_gift(item) {
			this.sel_community = item;
			this.$refs['gift'].open();
		},
		// 赠送礼物的相关逻辑
		async giftEvent() {
			// 当前选中礼物
			const l = this.gift[this.gift_active];

			const gift_price = l.Price * l.Num;

			let res_gift = await this.$api.post('Friend/SendGift', {
				Price: gift_price,
				GiftID: l.ID,
				GiftName: l.Name,
				GiftQty: l.Num,
				ToUserID: this.sel_community.UserID,
				EventID: this.sel_community.ID,
				SendType: '球友圈赠送'
			});

			// 支付请求
			let pres = await this.$api.post('Payment/PayV2', {
				total_fee: gift_price,
				EventType: '赠送礼物',
				EventID: JSON.stringify(res_gift.data),
				body: l.Name,
				SourcePage: 'subject',
				// #ifdef MP-WEIXIN
				PayChannel: 'weixin',
				// #endif
				// #ifdef APP
				PayChannel: 'app'
				// #endif
			});
			// 已余额支付成功
			if (pres.data == 0) {
				// 提示赠送成功
				this.$pv.msg('礼物赠送成功');
				// 关闭礼物弹出层
				this.$refs['gift'].close();

				this.list.forEach((item, index) => {
					if (item.ID == this.sel_community.ID) {
						item.IsSendGift = 1;
						item.TotalGiftNum = item.TotalGiftNum + l.Num;
						this.list.splice(index, 1, item);
					}
				});

				// 自定义对话内容(自定义消息,JSON(消息),id,判断条件)
				this.$im.sendMessage(200, JSON.stringify(l), this.sel_community.UserID + '', 12).then((res) => {
					console.log(JSON.stringify(l));
				});

				return;
			}

			// 支付成功返回的内容
			let payObj = JSON.parse(pres.data);

			let _this = this;
			// 调用uni支付API
			uni.requestPayment({
				// 服务提供商
				provider: 'wxpay',
				// #ifdef APP
				orderInfo: payObj,
				// #endif
				// #ifdef MP-WEIXIN
				timeStamp: payObj.timeStamp,
				nonceStr: payObj.nonceStr,
				package: payObj.package,
				signType: payObj.signType,
				paySign: payObj.paySign,
				// #endif
				success(res) {
					// _this.$pv.msg('等待对方同意');
					// 关闭礼物弹出层
					_this.$refs['gift'].close();

					_this.$pv.msg('礼物赠送成功');

					_this.list.forEach((item, index) => {
						if (item.ID == _this.sel_community.ID) {
							item.IsSendGift = 1;
							item.TotalGiftNum = item.TotalGiftNum + l.Num;
							_this.list.splice(index, 1, item);
						}
					});

					// 自定义对话内容(自定义消息,JSON(消息),id,判断条件)
					_this.$im.sendMessage(200, JSON.stringify(l), _this.sel_community.UserID + '', 12).then((res) => {
						console.log(JSON.stringify(l));
					});
				},
				fail(err) {
					_this.$pv.msg('支付失败');
				}
			});
		},
		// 赞
		async zan(item) {
			this.zan_id = item.ID;

			console.log(JSON.stringify(item));
			let res = await this.$api.post('Community/ZAN', {
				ID: item.ID
			});

			if (JSON.stringify(res.data) == 'true') {
				this.$pv.msg('点赞成功');

				this.list.forEach((item, index) => {
					if (item.ID == this.zan_id) {
						item.IsMyZAN = 1;
						item.CommunityZAN.push({
							UserID: this.cache_user.UserID,
							HeadImgUrl: this.cache_user.HeadImgUrl
						});
						this.list.splice(index, 1, item);
					}
				});
			} else {
				this.$pv.msg(res.message);
			}
		},

		sharePYQ() {
			const user = uni.getStorageSync('user');

			const pid = user.UserID;
			let id = this.sel_community.ID;
			let _title = this.sel_community.Content ? this.sel_community.Content : '发现精彩的挥友动态，赶快来围观吧';

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/cm_detail?id=${id}&pid=${pid}`;
			let shareUrl = BaseUrl + paseUrl;

			uni.share({
				provider: 'weixin',
				scene: 'WXSceneTimeline',
				type: 0,
				href: shareUrl,
				title: '【挥友朋友圈】' + _title,
				imageUrl: JSON.parse(this.sel_community.Images)[0],
				success: (res) => {
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		},
		shareWX() {
			const user = uni.getStorageSync('user');

			const pid = user.UserID;
			let id = this.sel_community.ID;
			let _title = this.sel_community.Content ? this.sel_community.Content : '发现精彩的挥友动态，赶快来围观吧';

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/cm_detail?id=${id}&pid=${pid}`;
			let sharUrl = BaseUrl + paseUrl;
			let _this = this;
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				imageUrl: JSON.parse(this.sel_community.Images)[0],
				title: '【挥友朋友圈】' + _title,
				miniProgram: {
					id: 'gh_ff1a33213d99',
					path: 'pages/dynamic/detail?id=' + id + '&pid=' + pid,
					type: 0,
					webUrl: sharUrl
				},
				success: (res) => {
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});

			// this.is_app_share_show = false;
		},
		go_user(l) {
			this.nav_to(`/pages/user/user_visitor?id=${l.ID}`);
		},
		lookimg(url, index) {
			let arr = JSON.parse(url);
			uni.previewImage({
				urls: arr,
				current: index
			});
		},
		prevAvatar(url) {
			uni.previewImage({
				current: 0,
				urls: [url]
			});
		},

		//下拉刷新
		async onRefresh() {
			this.init();
			setTimeout(() => {
				uni.$emit('triggered');
			}, 2000);
		},
		//滚动到底部触发
		async scrolltolower() {
			this.bottom_load = true;

			this.PageIndex++;

			this.getDynamicList(0);

			this.bottom_load = false;
		},

		async init() {
			await this.$api.post('/Common/Add_ViewPath', {
				Path: 'subject',
				Platform: uni.getStorageSync('platform')
			});

			let res = await this.$api.post('Action/GetActionDetail', {
				ID: this.actionID
			});

			this.subjectData = res.data;

			uni.setNavigationBarTitle({
				title: this.subjectData.Title
			});

			this.load = true;

			await this.getDynamicList(0);

			this.PageIndex = 1;
		},
		async getDynamicList(e) {
			let res = await this.$api.post('Community/Subject', {
				ActionID: this.actionID,
				PageIndex: this.PageIndex,
				PageSize: this.PageSize,
				Sort: e
			});
			// console.log('==============222',res);
			let l = this.list.concat(res.data);
			this.list = this.clearRepetition(l, 'ID');

			this.dynamicLength = this.list.length;
		},

		// 去重,后面的覆盖前面的
		clearRepetition(arr, key = 'ID') {
			let newArr = [];
			arr.forEach((item) => {
				let index;
				let check = newArr.every((newItem, i) => {
					if (item[key] !== newItem[key]) {
						index = -1;
						return true;
					} else {
						index = i;

						return false;
					}
				});
				if (check) {
					newArr.push(item);
				} else {
					newArr.splice(index, 1, item);
				}
			});
			return newArr;
		}
	},

	async onLoad(e) {
		this.actionID = e.id;

		if (await this.$store.getters.getLoginState) {
			this.cache_user = uni.getStorageSync('user');

			this.init();

			this.GetGift();
		}
	},
	async onShow(e) {},
	onReady() {}
};
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}
button::after {
	border: none;
}
.subject_page {
	// background: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf-bg.png');
	// background-repeat: no-repeat;
	// background-size: cover;
	// background-position-x: center;
	// background-position-y: center;
	// position: relative;
}

.mt20 {
	margin-top: 20rpx;

	.one {
		display: flex;
		width: 100%;
		//height: 480rpx;

		image {
			width: 70%;
		}
	}

	.two {
		display: flex;
		justify-content: space-between;

		.two-one {
			width: 40%;
			height: 480rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.two-two {
			width: 59.5%;
			height: 480rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.three {
		display: flex;
		justify-content: space-between;

		.three-one {
			width: 49.5%;
			height: 480rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.three-two {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 49.5%;
			height: 480rpx;

			image {
				width: 100%;
				height: 49.5%;
			}
		}
	}

	.four {
		display: flex;
		flex-direction: column;

		.four-one {
			display: flex;
			justify-content: space-between;

			.four-one-one {
				width: 40%;
				height: 300rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.four-one-two {
				width: 59.5%;
				height: 300rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.four-two {
			display: flex;
			justify-content: space-between;

			.four-two-one {
				width: 59.5%;
				height: 300rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.four-two-two {
				width: 40%;
				height: 300rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.five {
		display: flex;
		flex-wrap: wrap;
		width: 100%;

		.five-one {
			width: 221rpx;
			height: 250rpx;
			margin-bottom: 8rpx;
			margin-right: 4rpx;
			margin-left: 4rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.video_box {
	height: 500rpx;
	position: relative;
	z-index: 2;

	video {
		width: 50%;
		height: 100%;
	}
}

.tabs {
	// position: sticky;
	// top: 0;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: #fff;

	.tabs_item {
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 12rpx;
		padding-right: 12rpx;
		color: #666666;
	}

	.tabs_item_curr {
		color: #333333;
		font-weight: bolder;
		position: relative;

		&::before {
			display: block;
			content: '';
			position: absolute;
			left: 0;
			bottom: 16rpx;
			width: 100%;
			height: 4rpx;
			border-radius: 4rpx;
			background: #333333;
		}
	}
}

.tap {
	top: 0;
	background: #1f1f1f;
	width: 100%;
	z-index: 888;
}

.dynamic:nth-child(1) {
	margin-top: 0;
}

.dynamic {
}

.tabs {
	height: 44px;
}

.subject {
	width: 100%;
	height: 380rpx;

	.title {
		font-size: 36rpx;
		padding-top: 80rpx;
		padding-left: 30rpx;
		padding-bottom: 15rpx;
		line-height: 25px;
		height: 50rpx;
		font-weight: bold;
		color: #d21f8a;
	}

	.item {
		padding-top: 15rpx;
		font-size: 28rpx;
		padding-left: 30rpx;
		color: #fff;
	}

	.desc {
		padding-top: 15rpx;
		font-size: 28rpx;
		padding-left: 30rpx;
		color: #fff;
		overflow: hidden;
		height: 120rpx;
		text {
			color: #fff;
		}
	}
}

.wap {
	padding-left: 38rpx;
	padding-right: 38rpx;
}

.border-bottom {
	height: 1px;
	margin-left: 38rpx;
	margin-right: 38rpx;
	border-bottom: 1px solid #505157;
}

.album {
	padding-bottom: 120rpx;

	.hd {
		margin-top: 36rpx;
		font-size: 32rpx;
		line-height: 38rpx;
		color: #bdbdbf;
		font-weight: 700;
	}

	.title_right {
		position: absolute;
		right: 30rpx;
	}

	.list {
		// padding-bottom: 20rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 8rpx;
		box-sizing: border-box;
		width: 100%;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		&::after {
			content: '';
			display: block;
			height: 1px;
			width: 325rpx;
		}

		.item {
			margin-bottom: 20rpx;
			background: #fff;
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 25rpx;

			.item_hd {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;
				padding-right: 20rpx;

				.left {
					height: 100rpx;
					display: flex;
					align-items: center;
				}

				.cover {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50rpx;
					border: 1px solid #7b7b7b;
					overflow: hidden;
					margin-right: 16rpx;

					image {
						height: 100%;
						width: 100%;
					}
				}

				.item_name {
					font-size: 32rpx !important;
					font-weight: 600;
					.year {
						color: #666666;
					}
				}
			}

			.item_ft {
				display: flex;
				justify-content: space-between;
				height: 60rpx;
				align-items: right;

				.ft_btn {
					display: flex;
					align-items: center;
				}

				.icon_box {
					height: 48rpx;
					width: 48rpx;
					border-radius: 48rpx;
					background: rgba(255, 255, 255, 0.9);
					margin-right: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						height: 32rpx;
						width: 32rpx;
					}
				}
			}

			.item_bd {
				.simg {
					// width: 750rpx;
					display: block;
					//max-height: 750rpx;
				}
			}
		}

		.message {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.name-avatar {
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.name {
					margin-left: 10rpx;
					font-size: 15px;
					font-weight: 600;
				}
			}

			.time {
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 15px;
				text-align: right;
			}
		}

		.content {
			margin-top: 10rpx;
			margin-bottom: 10rpx;
		}

		.imglist {
			box-sizing: border-box;
			width: 100%;
			margin: 10rpx 0 20rpx 0;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;

			.img {
				box-sizing: border-box;
				width: 180rpx;
				height: 180rpx;
				margin-top: 20rpx;
				margin-left: 18rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.ft_btn {
			width: 100%;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.icon_box {
				height: 48rpx;
				width: 48rpx;
				border-radius: 48rpx;
				background: rgba(255, 255, 255, 0.9);
				margin-right: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					height: 32rpx;
					width: 32rpx;
				}
			}

			.time {
				width: 75%;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 15px;
				text-align: left;
			}

			.icon_pad {
				padding-left: 25rpx;
				padding-right: 10rpx;
				text-align: left;
			}
		}

		.mt20 {
			margin-top: 20rpx;
			width: 100%;

			.two {
				display: flex;
				justify-content: space-between;
				width: 100%;

				.two-one {
					width: 40%;
					height: 480rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.two-two {
					width: 59.5%;
					height: 480rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.three {
				display: flex;
				justify-content: space-between;
				width: 100%;

				.three-one {
					width: 49.5%;
					height: 480rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.three-two {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 49.5%;
					height: 480rpx;

					image {
						width: 100%;
						height: 49.6%;
					}
				}
			}

			.four {
				display: flex;
				flex-direction: column;

				.four-one {
					display: flex;
					justify-content: space-between;

					.four-one-one {
						width: 40%;
						height: 300rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.four-one-two {
						width: 59.5%;
						height: 300rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.four-two {
					display: flex;
					justify-content: space-between;

					.four-two-one {
						width: 59.5%;
						height: 300rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.four-two-two {
						width: 40%;
						height: 300rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.five {
				display: flex;
				flex-wrap: wrap;
				width: 100%;

				.five-one {
					width: 221rpx;
					height: 250rpx;
					margin-bottom: 8rpx;
					margin-left: 4rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.video_box {
			width: 100%;
			height: 450rpx;

			video {
				width: 50%;
				height: 100%;
			}
		}

		.all-list {
			box-sizing: border-box;
			padding: 0 32rpx;

			.location {
				font-size: 30rpx;
				color: #dcc188;
			}

			.upvote {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10rpx 0;
				margin-top: 40rpx;
				.zan-time {
					font-size: 26rpx;
					color: #999999;
				}

				.zan-review {
					display: flex;
					align-items: right;
					margin: 10rpx 0;
					height: 40rpx;

					image {
						padding-top: 26rpx;
						width: 48rpx;
						height: 48rpx;
					}

					.zan {
						margin-right: 40rpx;
						display: flex;
						align-items: center;

						text {
							height: 40rpx !important;
							padding-left: 10rpx;
						}
					}

					button {
						display: flex;
						//height:50rpx !important;
						margin-top: -30rpx;
					}
				}

				.gift-review {
					display: flex;
					align-items: right;

					.zan {
						margin-right: 40rpx;
					}
				}
			}

			.tishi {
				box-sizing: border-box;
				position: relative;
				height: 60rpx;
				border-radius: 6rpx;
				background-color: #ffffff;
				display: flex;
				margin-top: 30rpx;
				padding-left: 6rpx;

				text {
					line-height: 60rpx;
					font-size: 28rpx;
					color: #dcc188;
					margin-left: 12rpx;
					letter-spacing: 2px;
				}

				.sanjiao {
					position: absolute;
					top: -15rpx;
					left: 30rpx;
					width: 0;
					height: 0;
					border-left: 15rpx solid transparent;
					border-right: 15rpx solid transparent;
					border-bottom: 20rpx solid #fff;
				}
			}

			.review-list {
				display: flex;
				flex-direction: column;
				/* margin: 20rpx 20rpx 20rpx; */
				background-color: #44423b;
				padding: 10rpx 20rpx;

				.item_c {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex-wrap: wrap;
					height: 45rpx;
					line-height: 45rpx;

					.content {
						margin-right: 20rpx;
						font-weight: 700;
						font-size: 24rpx;

						text {
							box-sizing: border-box;
							color: #fff;
							font-weight: bold;
							padding-right: 10rpx;
							font-size: 28rpx;
						}
					}

					.del {
						font-size: 12px;
						color: #576b95;
					}
				}
			}
		}
	}

	.empty {
		background: #262626;
		min-height: 500rpx;
	}
}

.dis {
	line-height: 1.8;
}

.more {
	margin-top: -35rpx;
	text-align: right;

	text {
		background: #111;
		padding-left: 20rpx;
		padding-right: 20rpx;
		border-radius: 20rpx;
	}
}

.more2 {
	text-align: center;
}

.btm {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 144rpx;
	box-sizing: border-box;
	// background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
	display: flex;
	justify-content: space-between;

	.btn1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 700rpx;
		height: 96rpx;
		background: #333333;
		border-radius: 12rpx;

		image {
			height: 40rpx;
			width: 40rpx;
			margin-right: 8rpx;
		}

		text {
			color: #fff;
			font-size: 34rpx;
			// text-shadow: 0px 2px 2px rgba(141, 107, 62, 0.7);
		}
	}

	.btn2 {
		width: 320rpx;
		//width: 100%;
		height: 96rpx;
		background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			height: 40rpx;
			width: 40rpx;
			margin-right: 8rpx;
		}

		text {
			font-size: 34rpx;
			color: #1f1f1f;
			line-height: 34px;
			text-shadow: 0px 2px 2px rgba(132, 108, 82, 0.8);
		}
	}
}

.x-share {
	background-color: #ffffff;
	width: 750rpx;
	border-radius: 20rpx;
	padding: 40rpx 20rpx 80rpx;
	display: flex;
	box-sizing: border-box;

	.item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #ffffff;

		image {
			width: 64rpx;
			height: 64rpx;
			margin-bottom: 10rpx;
		}

		span {
			color: #2e2e2e;
		}
	}
}

.x-popup {
	background-color: #ffffff;
	width: 650rpx;
	height: 750rpx;
	border-radius: 20rpx;
	padding-bottom: 20rpx;

	.popup-title {
		padding: 5rpx 0 10rpx;
		text-align: center;
		font-size: 28rpx;
		position: relative;
		color: #333;

		.xiaoju-popup-close {
			font-size: 24rpx;
			position: absolute;
			right: 50rpx;
			top: 10rpx;
			color: #333;
		}
	}

	.desc {
		padding: 24rpx;

		font-size: 28rpx;

		text {
			color: #151313;
		}
	}

	.popup-wrap {
		max-height: 800rpx;
		min-height: 300rpx;
		padding: 10rpx 10rpx 10rpx 30rpx;

		.popup-cell {
			padding: 8rpx 40rpx;
			font-size: 30rpx;
			line-height: 44rpx;
		}

		.text {
			color: #fff;
		}
	}

	.popup-btn {
		margin: 0 auto;
		width: 200rpx;
		height: 60rpx;
		border-radius: 10rpx;
		color: #fff;
		font-size: 28rpx;
		letter-spacing: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fd4c61;
	}
}

.x-list {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	padding: 0 60rpx;

	.list-cell {
		width: 27%;
		height: 170rpx;
		border: 2rpx solid #fff;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 5rpx 0rpx 10rpx;
		border-radius: 16rpx;
		position: relative;

		&.list-active {
			border-radius: 16rpx;
			border: 2rpx solid #70737c;
		}

		.list-btn {
			width: calc(100% + 4rpx);
			height: 52rpx;
			color: #fff;
			background: #fd4c61;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			position: absolute;
			bottom: -2rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;

			.count {
				color: #fff;
				line-height: 60rpx !important;
				// margin-right: 5rpx;
			}

			.add {
				display: flex;
				justify-content: center;
				align-items: center;
				/* border: 2rpx solid #ccc; */
				box-sizing: border-box;
				font-size: 52rpx;
				width: 75rpx;
				color: #fff;
			}
		}

		.list-icon {
			width: 80rpx;
			height: 80rpx;
		}

		.list-name {
			color: #333;
			font-size: 26rpx;
			margin-top: 8rpx;
		}

		.list-price {
			color: #333;
			font-size: 22rpx;
			margin-top: 5rpx;
		}
	}
}
</style>
